<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>圣诞老人</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
      text-decoration: none;
      transition: all 0.28s ease-in 0.1s;
    }
    body {
      width: 100%;
      height: 100%;
      /* overflow: hidden; */
    }
    section {
      width: 100vw;
      height: 100vh;
      box-shadow: 0 0 4px 3px rgba(255, 255, 255, 0.7) inset;
    }
    .s1 {
      background: url(img/297890.jpg);
    }
    .s2 {
      background: url(img/297891.jpg);
    }
    .s3 {
      background: url(img/314821.jpg);
    }
    .s4 {
      background: url(img/323159.jpg);
    }

    header {
      position: fixed;
      width: 100%;
      min-width: 1200px;
      z-index: 3;

      background: transparent;
    }
    ul {
      list-style: none;
      margin-left: 30%;
    }
    ul li {
      float: left;
      margin: 30px;
    }
    ul > li > a {
      padding: 5px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1.2em;
      font-weight: 900;
      letter-spacing: 5px;
      color: #fff;
      text-decoration: none;
      border: 1px solid #fff;
      border-radius: 4px;
    }

    ul > li > a:hover {
      color: #c4e538;
      background-color: rgba(255, 255, 255, 0.3);
    }
    .content {
      position: absolute;
      width: 40%;
      margin-top: 19%;
      margin-left: 20%;
      border: 1px solid #fff;
      padding: 12px 15px;
      border-radius: 12px;

      transition: all 0.28s ease-in 0.1s;
    }
    .content:hover {
      background-color: rgb(138, 81, 81);
    }
    .content p {
      color: #fff;
      font-size: 1.1em;
      line-height: 2em;
    }
    .goTop {
      position: fixed;
      right: 40px;
      bottom: 30px;
      width: 80px;
      height: 45px;
      font-size: 1em;
      border-radius: 8px;
      background-color: #fff;
    }
    .goTop a {
      cursor: pointer;
      margin-left: 7px;
      line-height: 45px;
    }
    .goTop:hover {
      background-color: rgb(138, 81, 81);
    }
  </style>
  <body>
    <header>
      <ul>
        <li><a href="#s1">圣诞故事</a></li>
        <li><a href="#s2">圣诞习俗</a></li>
        <li><a href="#s3">圣诞传说</a></li>
        <li><a href="#s4">圣诞起源</a></li>
      </ul>
    </header>
    <section id="s1" class="s1">
      <div class="content">
        <p>
          身穿厚厚红白大袍的圣诞老公公，其实并不是出生在冰冷的北极圈，而是地中海岸的登雷镇，所以他如果穿着这身打扮出现在老家，肯定是热得直呼受不了。
          　　据报道，圣诞老人故事源自圣尼古拉这名宗教人物。他在公元四世纪时担任土耳其登雷镇这个长时艳阳高照的小镇的主教，为人乐善好施，后来人们在他的生平事迹里加进了一些神话故事，
          最后就就演变成大家今日熟悉的带礼物、笑容满面的圣诞老人。
        </p>
      </div>
    </section>
    <section id="s2" class="s2">
      <div class="content">
        <p>
          圣诞贺卡作为圣诞节礼物在美国和欧洲很流行，许多家庭随贺卡带上年度家庭合照或家庭新闻，新闻一般包括家庭成员在过去一年的优点特长等内容。圣诞节这天寄赠圣诞贺卡，除表示庆贺圣诞的喜乐外，就是向亲友祝福，以表思念之情。
          尤其对在孤寂中的亲友，更是亲切的关怀和安慰。
        </p>
      </div>
    </section>
    <section id="s3" class="s3">
      <div class="content">
        <p class="p3">
          传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在孩子床头的袜子里，
          或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。
        </p>
        <p class="p3">
          虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿黑色靴子的样子，
          拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。
        </p>
      </div>
    </section>
    <section id="s4" class="s4">
      <div class="content">
        <p class="p4">
          19世纪60年代卡通制作者Thomas
          Nash画了一幅胖胖的、慈祥的圣诞老人作为《Harper的一周》的插图。这个圣诞老人的形象开始深深地扎根于美国人民的脑海中。
          随着时间的推移，圣诞老人的形象传回欧洲，传到南美洲，传遍世界各地。
        </p>
      </div>
    </section>
    <div class="goTop">
      <a href="#s1">回到顶部</a>
    </div>
  </body>
</html>
